<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layout}">

<head>
	<meta charset="UTF-8">
	<title>运行日志</title>
	<style>

	</style>
</head>

<body>
	<div layout:fragment="fragment_body">
		<div class="toolbar">
			<div style="flex: 1">
				<h5>日志列表</h5>
			</div>
			<div >
				<el-button v-if="dir != null && dir !=''" type="success" @click="returnP()" icon="DArrowLeft"
							style="margin-top: 12px;">返回上一级</el-button>
			</div>
		</div>
		<el-empty description="暂无日志" v-if="list == null || list.length == 0"></el-empty>
		<el-table :data="list" v-if="list !== null && list.length > 0" border style="width: 100%;margin-top: 12px;">
			<el-table-column prop="name" label="名称" width="200"></el-table-column>
			<el-table-column prop="type" label="类型" width="100">
				<template #default="scope">
					<el-icon :size="20" color="green" v-if="scope.row.type == 1">
						<Folder></Folder>
					</el-icon>
					<el-icon :size="20" color="red" v-if="scope.row.type == 0">
						<Files></Files>
					</el-icon>
				</template>
			</el-table-column>
			<el-table-column prop="size" label="大小" width="80">
				<template #default="scope">{{scope.row.size}}kb</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
			<el-table-column prop="fullPath" label="路径"></el-table-column>
			<el-table-column prop="nodeCreate" label="操作" width="150">
				<template #default="scope">
					<el-button v-if="scope.row.type == 1" type="text" size="small"
						@click="loadLogList(scope.row.name)">进入</el-button>
					<!--<el-button v-if="scope.row.type == 0" type="text" size="small"
						@click="read(scope.row.name)">查看</el-button>-->
					<el-button :disabled="true" v-if="scope.row.type == 0" type="text" size="small"
						@click="download(scope.row.fullPath)">查看</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	const _data = {
		list: [],
		listStatus: null,
		dir: null
	}
	const _method = {
		changeStatus(val) {
			this.listStatus = val
		},
		returnP() {
			this.dir = ''
			this.loadLogList('')
		},
		loadLogList(dir) {
			let that = this
			that.dir = dir
			getRequst('/log/list?dir=' + dir).then(function (resp) {
				that.list = resp.data
			})
		},
		download(fullPath) {
			let encodedStr = btoa(fullPath);
			alert(encodedStr)
		},
		read(name) {
			let that = this
			if (!window.EventSource) {
				that.$message({message: "你的浏览器不支持SSE", type: "warning"});
				return null;
			}
			let source = new EventSource('/log/read?dir=' + name);
			source.onopen = function(e){
				that.$message({message: "开始读取文件", type: "success"});
			}
			source.onmessage = function(e){
				console.log(e.data);
			}
			source.onerror = function(event) {
				if (event.readyState === EventSource.CLOSED) {
					that.$message({message: "连接关闭", type: "error"});
				} else {
					console.log(event);
				}
			};
			window.onbeforeunload = function () {
		        //close();
		    };
		}

	}
	function _created() {
		this.loadLogList('')
	}
	const _watch = {

	}
</script>

</html>